<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
    </TableSearch>
    <ServiceUpdateDlg
      v-if="dlgVisible"
      :visible.sync="dlgVisible"
      :title="dlgTitle"
      :type="dlgType"
      :items="dlgItems"
      @refresh="refresh"
    />
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import ServiceUpdateDlg from './components/ServiceUpdateDlg'
import { deleteServerInfo, selectServerInfoPage } from '@/api/paramsSetting'
export default {
  name: 'serviceIp',
  components: { TableSearch, ServiceUpdateDlg },
  data() {
    return {
      dlgVisible: false,
      dlgTitle: '新增',
      dlgType: 'add',
      loading: false,
      dlgItems: {},
      tableBtns: [
        {
          label: '新增',
          icon: 'el-icon-plus',
          click: () => {
            this.dlgVisible = true
            this.dlgTitle = '新增'
            this.dlgType = 'add'
          },
          resourceId: '/web/system-management/server-info/新增',
        },
      ],
      searchPath: '/web/system-management/server-info/查询',
      formItemsInline: [
        {
          placeholder: '请输入ip',
          type: 'text',
          clearable: true,
          value: 'serverIp',
          resourceId: '/web/system-management/server-info/服务器Ip',
        },
        {
          placeholder: '请输入服务器名称',
          type: 'text',
          clearable: true,
          value: 'serverName',
          resourceId: '/web/system-management/server-info/服务器名称',
        },
      ],
      columns: [
        {
          label: '服务器名称',
          prop: 'serverName',
          resourceId: '/web/system-management/server-info/服务器名称',
        },
        {
          label: '服务ip',
          prop: 'serverIp',
          resourceId: '/web/system-management/server-info/服务器Ip',
        },
        {
          label: '端口号',
          prop: 'serverPort',
          resourceId: '/web/system-management/server-info/端口号',
        },
        {
          label: 'Onenet产品ID',
          prop: 'onenetProductId',
          formatter: (row) => {
            return row.onenetProductId || '--'
          },
          resourceId: '/web/system-management/server-info/Onenet产品ID',
        },
        {
          label: 'Onenet注册码',
          prop: 'onenetRegistryCode',
          formatter: (row) => {
            return row.onenetRegistryCode || '--'
          },
          resourceId: '/web/system-management/server-info/Onenet注册码',
        },
        {
          label: '操作',
          resourceId: '',
          buttons: [
            {
              label: '编辑',
              click: (row) => {
                this.dlgVisible = true
                this.dlgTitle = '修改'
                this.dlgType = 'edit'
                this.dlgItems = row
              },
              resourceId: '/web/system-management/server-info/编辑',
            },
            {
              label: '删除',
              click: (row) => {
                this.$confirm(
                  `你确定要删除服务器${row.serverName}吗？`,
                  '删除服务器',
                  {
                    center: true,
                    customClass: 'tip-dialog__wrapper',
                  }
                ).then(() => {
                  this.loading = true
                  deleteServerInfo({
                    id: row.id,
                  })
                    .then(() => {
                      this.$message({
                        showClose: true,
                        type: 'success',
                        message: '删除成功',
                      })

                      this.$refs.tableSearch.refreshTable()
                    })
                    .catch((err) => {
                      console.log(err)
                    })
                    .finally(() => {
                      this.loading = false
                    })
                })
              },
              resourceId: '/web/system-management/server-info/删除',
            },
          ],
        },
      ],
      tableData: {},
      form: {},
    }
  },
  methods: {
    refresh() {
      this.$refs.tableSearch.refreshTable()
    },
    handleTableData(params) {
      this.loading = true
      selectServerInfoPage(params)
        .then((res) => {
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset() {
      this.form = {}
    },
  },
}
</script>
<style lang="scss" scoped></style>
